<template>
  <div>
    <g-layout :isShowLeftSider="false">
      <template #content>
        <div class="content-container">
          <a-input v-model:value="fieldModel"></a-input>
          <canvas
            :id="field.id"
            :jsbarcode-format="field.options.format"
            :jsbarcode-value="fieldModel"
            :jsbarcode-width="field.options.width"
            :jsbarcode-height="field.options.height"
            :jsbarcode-displayValue="field.options.displayValue"
            :jsbarcode-lineColor="field.options.lineColor"
            :jsbarcode-background="field.options.background"
            :jsbarcode-margin="field.options.margin"
          ></canvas>
        </div>
      </template>
    </g-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import IndexMixin from './index-mixin';
  export default defineComponent({
    name: 'barcode',
    mixins: [IndexMixin],
  });
</script>

<style lang="less" scoped>
  .content-container {
    padding: 16px;
  }
</style>
